import { uuid } from "@pureadmin/utils";
import { computed, defineAsyncComponent, ref } from "vue";

export type MenuItem = {
  key?: string;
  name: string;
  icon?: string;
  component?: any;
  path?: string;
  hideInMenu?: boolean;
  props?: any;
  children?: MenuItem[];
};

const routers = ref<MenuItem[]>([
  {
    key: uuid(),
    name: "集群管理",
    path: "/cluster",
    children: [
      {
        key: uuid(),
        name: "节点",
        icon: "el-icon-monitor",
        path: "/cluster/node",
        component: defineAsyncComponent(() => import("./node/Node.vue"))
      },
      {
        key: uuid(),
        name: "节点详情",
        icon: "el-icon-monitor",
        path: "/cluster/nodeDetails",
        hideInMenu: true,
        component: defineAsyncComponent(() => import("./node/NodeDetails.vue"))
      },
      {
        key: uuid(),
        name: "命名空间",
        icon: "el-icon-folder-opened",
        path: "/cluster/namespace",
        component: defineAsyncComponent(
          () => import("./namespace/Namespace.vue")
        )
      },
      {
        key: uuid(),
        name: "命名空间详情",
        icon: "el-icon-folder-opened",
        path: "/cluster/namespaceDetails",
        hideInMenu: true,
        component: defineAsyncComponent(
          () => import("./namespace/NamespaceDetails.vue")
        )
      },
      {
        key: uuid(),
        name: "PersistentVolume",
        icon: "el-icon-document",
        path: "/cluster/persistentVolume",
        component: defineAsyncComponent(
          () => import("./persistentvolume/PersistentVolume.vue")
        )
      }
    ]
  },
  {
    key: uuid(),
    name: "工作负载",
    path: "/workload",
    children: [
      {
        key: uuid(),
        name: "Pod",
        icon: "el-icon-document",
        path: "/workload/pod",
        component: defineAsyncComponent(() => import("./pod/Pod.vue"))
      },
      {
        key: uuid(),
        name: "Deployment",
        icon: "el-icon-document",
        path: "/workload/deployment",
        component: defineAsyncComponent(
          () => import("./deployment/Deployment.vue")
        )
      },
      {
        key: uuid(),
        name: "StatefulSet",
        icon: "el-icon-document",
        path: "/workload/statefulSet",
        component: defineAsyncComponent(
          () => import("./statefulset/StatefulSet.vue")
        )
      }
    ]
  },
  {
    key: uuid(),
    name: "负载均衡",
    path: "/loadBalancer",
    children: [
      {
        key: uuid(),
        name: "Service",
        icon: "el-icon-document",
        path: "/loadBalancer/service",
        component: defineAsyncComponent(() => import("./service/Service.vue"))
      },
      {
        key: uuid(),
        name: "Ingress",
        icon: "el-icon-document",
        path: "/loadBalancer/ingress",
        component: defineAsyncComponent(() => import("./ingress/Ingress.vue"))
      }
    ]
  },
  {
    key: uuid(),
    name: "存储与配置",
    path: "/storage",
    children: [
      {
        key: uuid(),
        name: "ConfigMap",
        icon: "el-icon-document",
        path: "/storage/configMap",
        component: defineAsyncComponent(
          () => import("./configMap/ConfigMap.vue")
        )
      },
      {
        key: uuid(),
        name: "Secret",
        icon: "el-icon-document",
        path: "/storage/secret",
        component: defineAsyncComponent(() => import("./secret/Secret.vue"))
      },

      {
        key: uuid(),
        name: "PersistentVolumeClaim",
        icon: "el-icon-document",
        path: "/storage/persistentVolumeClaim",
        component: defineAsyncComponent(
          () => import("./persistentvolumeclaim/PersistentVolumeClaim.vue")
        )
      }
    ]
  }
]);

// const _activeMenu = ref<MenuItem>(routers.value[0].children[0]);
const activeMenu = computed({
  get() {
    return routeHistory.value[routeHistory.value.length - 1];
  },
  set(val) {
    routeHistory.value = [val];
  }
});
const routeHistory = ref<MenuItem[]>([routers.value[0].children[0]]);

const findRoute = (path: string): MenuItem | undefined => {
  const routepaths = (path.startsWith("/") ? path.substring(1) : path).split(
    "/"
  );

  let findPath = "";
  let route: MenuItem = undefined;
  for (let i = 0; i < routepaths.length; i++) {
    if (i === 0) {
      findPath = routepaths[i];
    } else {
      findPath = findPath + "/" + routepaths[i];
    }
    route = findRouteByPath(findPath, route ? route.children : routers.value);
    if (!route) {
      return;
    }
  }

  return route;
};

const findRouteByPath = (
  path: string,
  routeList?: MenuItem[]
): MenuItem | undefined => {
  const routePath = path.startsWith("/") ? path : "/" + path;
  const rs = routeList.filter(item => item.path === routePath);
  if (rs.length > 0) {
    return rs[0];
  }
};

const jumpToRoutePath = (path: string, args?: any) => {
  console.log("jumpToRoutePath", path, args);
  const route = findRoute(path);
  if (route) {
    routeHistory.value.push({ ...route, props: args });
  }
};

const popHistoryRoute = () => {
  if (routeHistory.value.length > 0) {
    routeHistory.value.pop();
  }
};

const clearHistory = () => {
  routeHistory.value = [];
};

export const useProvider = () => {
  return {
    routers,
    activeMenu,
    jumpToRoutePath,
    popHistoryRoute,
    routeHistory,
    clearHistory
  };
};
